<template>
	<view>
		<u-navbar title='司机入驻' :autoBack="true" placeholder="true" left-icon-color="white"
			:titleStyle="{'color':'white'}" bgColor="#2a64d1">
			<!-- placeholder="true" left-icon-color="white"
			:titleStyle="{'color':'white'}" :bgColor="color" -->
		</u-navbar>
		<u-swiper :list="bannerList" height="350rpx" indicator indicatorMode='dot'
			style="margin-top: 30rpx;"></u-swiper>
		<view style="margin:30rpx 20rpx; background-color: white;border-radius: 30rpx;padding: 20rpx 0;">
			<view class="item">
				<view class="itemTitle"><text style="margin-right: 10rpx;color:red">*</text>真实姓名</view>
				<view style="background: #F4F4F4;border-radius: 100rpx;">
					<u--input border='bottom' v-model="name"></u--input>
				</view>
			</view>
			<view class="item">
				<view class="itemTitle"><text style="margin-right: 10rpx;color:red">*</text>电话号码</view>
				<view style="background: #F4F4F4;border-radius: 100rpx;">
					<u--input border='bottom' v-model="phone"></u--input>
				</view>
				<view style="color:#C9C9C9;font-size: 20rpx;margin-top: 10rpx;">我们将保护您的隐私</view>
			</view>
			<view class="item" @click="carShow = true">
				<view class="itemTitle"><text style="margin-right: 10rpx;color:red">*</text>车牌号</view>
				<view style="background: #F4F4F4;border-radius: 100rpx;">
					<u--input border='bottom' v-model="carNumber" readonly></u--input>
				</view>
			</view>
			<view class="item">
				<view class="itemTitle">本单佣金</view>
				<view style="background: #F4F4F4;border-radius: 100rpx;">
					<u--input border='bottom' v-model="driverGetAmount" ></u--input>
				</view>
			</view>
		</view>

		<view class="item" style="background-color: white;border-radius: 30rpx;">
			<view class="itemTitle" style="border-bottom: 1rpx solid #eee;padding-bottom:10px;margin-bottom:20rpx;">
				<text style="margin-right: 10rpx;color:red">*</text>车型
			</view>
			<u-radio-group @change='carTypeChange' v-model="carType" placement="column" iconPlacement="right"
				:borderBottom='true'>
				<u-radio activeColor="#2a64d1" labelSize='12' :customStyle="{marginBottom: '8px'}"
					v-for="(item, index) in carTypeList" :key="index" :label="item.name" :name="item.code">
				</u-radio>
			</u-radio-group>
			<view style="background: #F3F6FD;
border-radius: 2rpx;">
				<u--input v-model="carTypeInput" placeholder='请输入您的车型' v-if="carType == 99"></u--input>
			</view>
		</view>
		
		<view class="item" style="background-color: white;border-radius: 30rpx;margin-top:30rpx ;">
			<view class="itemTitle" style="border-bottom: 1rpx solid #eee;padding-bottom:10px;margin-bottom:20rpx;">
				<text style="margin-right: 10rpx;color:red">*</text>仓库
			</view>
			<u-radio-group  v-model="warehouseId" placement="column" iconPlacement="right"
				:borderBottom='true'>
				<u-radio activeColor="#2a64d1" labelSize='12' :customStyle="{marginBottom: '8px'}"
					v-for="(item, index) in warehouseList" :key="index" :label="item.name" :name="item.code">
				</u-radio>
			</u-radio-group>
			<!-- <view style="background: #F3F6FD;
border-radius: 2rpx;">
				<u--input v-model="carTypeInput" placeholder='请输入您的车型' v-if="carType == 99"></u--input>
			</view> -->
		</view>

		<view class="item" style="background-color: white;margin-top: 20rpx;border-radius: 30rpx;">
			<view class="itemTitle" style="border-bottom: 1rpx solid #eee;padding-bottom:10px;margin-bottom:20rpx;">
				<text style="margin-right: 10rpx;color:red">*</text>常跑地址 [多选]
			</view>
			<view :style="{'height': cityOpenStatus ? 'auto' :'300rpx','transition':'1s all','overflow':'hidden'}">
				<u-checkbox-group v-model="city" placement="column" iconPlacement="right" :borderBottom='true'
					@change="cityChange">
					<u-checkbox shape='circle' activeColor="#2a64d1" labelSize='12' :customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in cityList" :key="index" :label="item.name" :name="item.code">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view @click="cityOpenStatus = !cityOpenStatus"
				style=" width:100%;font-size: 24rpx;color:#2a64d1;text-align: center;display: flex;justify-content: center;">
				<text v-if="cityOpenStatus">收起</text>
				<text v-else>展开</text>
				<u-icon v-if="cityOpenStatus" name="arrow-up" color='#2a64d1'></u-icon>
				<u-icon v-else name="arrow-down" color='#2a64d1'></u-icon>
			</view>
		</view>
		<view style="margin:100rpx auto;width: 500rpx;">
			<u-button color='#2a64d1' shape="circle" @click="saveClick">保存</u-button>
		</view>
		<u-keyboard ref="uKeyboard" safeAreaInsetBottom='true' @backspace='backspace' @change='carChange'
			@cancel='cancelChange' @close='carClose' @confirm='confirmChange' mode="car" :show="carShow"></u-keyboard>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		onShow() {
			console.log(this.color)
		},
		data() {
			return {
				carShow: false,
				color: app.globalData.defaultColor,
				city: [],
				cityOpenStatus: false,
				cityList: [],
				name: '',
				phone: '',
				warehouseId:'',//仓库id
				carNumber: '',
				carTypeInput: '', // 其他车型
				bannerList: [
					'https://renovationcdn.jiachuangnet.com/driver01.png'
				],
				carType: '',
				carTypeList: [],
				warehouseList:[],
				driverGetAmount:0,//本单佣金
			}
		},
		onLoad() {
			this.getCarType();
			this.getCity();
			this.getWarehouse()
		},
		methods: {
			getWarehouse(){
				uni.$u.http.get('/driverGarage/warehouseEnum', {
				
				}).then(res => {
					this.warehouseList = res;
				
				})
			},
			getCity() {
				uni.$u.http.get('/driverGarage/provincialEnum', {

				}).then(res => {
					this.cityList = res;

				})
			},
			getCarType() {
				uni.$u.http.get('/driverGarage/carTypeEnum', {

				}).then(res => {
					this.carTypeList = res;

				})
			},
			carChange(e) {
				this.carNumber += e;

			},
			confirmChange(e) {

				this.carShow = false;
			},
			backspace() {
				// 删除value的最后一个字符
				if (this.carNumber.length) this.carNumber = this.carNumber.substr(0, this.carNumber.length - 1);

			},
			carClose() {
				this.carShow = false;
			},
			cancelChange(e) {

				this.carNumber = ''
				this.carShow = false;
			},
			carTypeChange(e) {

			},
			cityChange(e) {

			},
			//防抖 3s内只触发一次
			saveHandler() {

				// if (!uni.$u.test.carNo(this.carNumber)) {
				// 	uni.$u.toast('请输入正确的车牌!');
				// 	return;
				// }
				if (!uni.$u.test.chinese(this.name) && !uni.$u.test.rangeLength(this.name, [2, 4])) {
					uni.$u.toast('请输入真实姓名!');
					return;
				}
				if (!uni.$u.test.mobile(this.phone)) {
					uni.$u.toast('请输入正确手机号!');
					return;
				}
				if (this.cityList.length < 0) {
					uni.$u.toast('请选择常跑地区!');
					return;
				}
				if (!this.carType) {
					uni.$u.toast('请选择车型!');
					return;
				}
				if (!this.warehouseId) {
					uni.$u.toast('请选择仓库!');
					return;
				}
				if (this.carType == 99) {
					if (this.carTypeInput == '') {
						uni.$u.toast('请填写您的车型!');
						return;
					}
				}
				
				console.log("finally",this.warehouseId);
				// return

				let data = {
					driverName: this.name,
					carNumber: this.carNumber,
					carTypeCode: this.carType,
					provinceCode: this.city,
					driverPhone: this.phone,
					warehouseId:this.warehouseId,
					driverGetAmount:this.driverGetAmount
				}
				if (this.carTypeInput && this.carType == 99) {
					data.carTypeName = this.carTypeInput
				}
				uni.$u.http.post('/driverGarage/addDriver', data).then(res => {
					console.log('司机录入',res);
					if(res){
						uni.$u.toast('录入成功!')
					}
					
				})

			},
			saveClick() {
				uni.$u.debounce(this.saveHandler, 1000)
			}

		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.item {
		width: 660rpx;
		min-height: 100rpx;
		// background-color: white;
		// box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		margin: 0 auto;
		// margin-top: 20rpx;
	}

	.itemTitle {
		font-size: 28rpx;
		margin-bottom: 20rpx;
		color: #1e1e1e;
	}
</style>